<template>
  <div class="city-search">
    <input placeholder="城市名或拼音（如北京/beijing）" @change="onChange" class="inputValue" />
  </div>
</template>

<script>
export default {
  name: 'CitySearch',
  methods: {
    onChange: function (value) {
      console.log(value)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/commStyle.styl"
.city-search
  line-height: 1rem
  background: $bgColor
  .inputValue
    padding: .1rem 0
    margin: .1rem 1rem
    border-radius: .1rem
    width: 4.5rem
    color: #ccc
    text-align: center
/*.city-search
  line-height: .84rem
  text-align: center
  width: 100%
  background: $bgColor
  height: .84rem
  .inputValue
    padding: 0 .4rem
    color: #666
    width: 4rem
    box-sizing: content-box*/
</style>
